<!--
 * @Author: xiejiafan 82864861@qq.com
 * @Date: 2024-05-08 12:04:21
 * @LastEditors: xiejiafan 82864861@qq.com
 * @LastEditTime: 2024-05-13 10:42:33
 * @FilePath: \tp\elvue\src\views\admin\home\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="p-6px">
    <el-card class="rounded-md dark:bg-black" shadow="hover">
      <div
        class="flex flex-items-center"
        v-waterMarker="{ text: 'fanadmin', textColor: '#D9D9D9' }"
      >
        <img
          class="w-60px h-60px rounded-full select-none"
          :src="avatar"
          alt="avatar"
        />
        <div class="p-l-20px">
          <div class="font-bold p-b-15px">
            <span>早安，fanadmin, 今天又是充满活力的一天! 😽</span>
          </div>
          <div class="whitespace-nowrap">今日多云转晴，20℃ - 25℃!</div>
        </div>
      </div>
    </el-card>
    <Card></Card>
    <el-row :gutter="20" class="m-t-5px">
      <!-- 注意：如果不进行操作数组，使用index当key没有问题，若是数组会用来增删改查则不能使用index当key。 -->
      <el-col :span="12" :lg="12" :md="12" :sm="24" :xs="24">
        <el-card class="rounded-md dark:bg-black" shadow="hover">
          <LeftChart></LeftChart>
        </el-card>
      </el-col>
      <el-col :span="12" :lg="12" :md="12" :sm="24" :xs="24">
        <el-card class="rounded-md dark:bg-black" shadow="hover">
          <RightChart></RightChart>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="m-t-5px">
      <!-- 注意：如果不进行操作数组，使用index当key没有问题，若是数组会用来增删改查则不能使用index当key。 -->
      <el-col :span="12" :lg="12" :md="12" :sm="24" :xs="24">
        <el-card class="rounded-md dark:bg-black" shadow="hover">
          <Timeline1></Timeline1>
        </el-card>
      </el-col>
      <el-col :span="12" :lg="12" :md="12" :sm="24" :xs="24">
        <Timeline2></Timeline2>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { getDayText } from '@/core/lib/random.ts'
import { noticeSuccess } from '@/core/lib/message.ts'
import Card from './components/Card.vue'
import LeftChart from './components/LeftChart.vue'
import RightChart from './components/RightChart.vue'
import Timeline1 from './components/Timeline1.vue'
import Timeline2 from './components/Timeline2.vue'
import { onMounted } from 'vue'
onMounted(() => {
  // 时间问候语
  noticeSuccess(getDayText(), '欢迎回来~')
})

// 头像
const avatar =
  ''
</script>

<style lang="scss" scoped></style>
